<template>
  <div class="p-6 bg-gray-50 dark:bg-gray-900">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold dark:text-white">酒店信息</h2>
      <div class="flex space-x-4">
        <a-button type="outline" @click="resetForm">
          <template #icon><icon-refresh /></template>
          重置
        </a-button>
        <a-button type="primary" @click="saveHotelInfo" :loading="saving">
          <template #icon><icon-save /></template>
          保存修改
        </a-button>
      </div>
    </div>

    <a-form :model="hotelInfo" layout="vertical">
      <!-- 基本信息 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium mb-4 dark:text-white">基本信息</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <a-form-item
            field="name"
            label="酒店名称"
            validate-trigger="blur"
            required
            class="dark:text-gray-300"
          >
            <a-input
              v-model="hotelInfo.name"
              placeholder="请输入酒店名称"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="phone"
            label="联系电话"
            validate-trigger="blur"
            required
            class="dark:text-gray-300"
          >
            <a-input
              v-model="hotelInfo.phone"
              placeholder="请输入联系电话"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="email"
            label="电子邮箱"
            validate-trigger="blur"
            class="dark:text-gray-300"
          >
            <a-input
              v-model="hotelInfo.email"
              placeholder="请输入电子邮箱"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="license"
            label="营业执照号"
            validate-trigger="blur"
            required
            class="dark:text-gray-300"
          >
            <a-input
              v-model="hotelInfo.license"
              placeholder="请输入营业执照号"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="address"
            label="详细地址"
            validate-trigger="blur"
            required
            :span="24"
            class="dark:text-gray-300"
          >
            <a-input
              v-model="hotelInfo.address"
              placeholder="请输入详细地址"
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="description"
            label="酒店简介"
            validate-trigger="blur"
            required
            :span="24"
            class="dark:text-gray-300"
          >
            <a-textarea
              v-model="hotelInfo.description"
              placeholder="请输入酒店简介"
              :max-length="500"
              show-word-limit
              allow-clear
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
        </div>
      </div>

      <!-- 营业时间 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium mb-4 dark:text-white">营业时间</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <a-form-item
            field="checkInTime"
            label="入住时间"
            required
            class="dark:text-gray-300"
          >
            <a-time-picker
              v-model="hotelInfo.checkInTime"
              format="HH:mm"
              placeholder="请选择入住时间"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="checkInEndTime"
            label="最晚入住时间"
            required
            class="dark:text-gray-300"
          >
            <a-time-picker
              v-model="hotelInfo.checkInEndTime"
              format="HH:mm"
              placeholder="请选择最晚入住时间"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
          <a-form-item
            field="checkOutTime"
            label="退房时间"
            required
            class="dark:text-gray-300"
          >
            <a-time-picker
              v-model="hotelInfo.checkOutTime"
              format="HH:mm"
              placeholder="请选择退房时间"
              class="dark:bg-gray-700 dark:text-gray-300"
            />
          </a-form-item>
        </div>
      </div>

      <!-- 设施服务 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h3 class="text-lg font-medium mb-4 dark:text-white">设施服务</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div v-for="(category, index) in facilities" :key="index">
            <h4 class="font-medium mb-2 dark:text-gray-300">
              {{ category.name }}
            </h4>
            <a-space direction="vertical">
              <a-checkbox
                v-for="item in category.items"
                :key="item.id"
                v-model="hotelInfo.facilities"
                :value="item.id"
                class="dark:text-gray-300"
              >
                {{ item.name }}
              </a-checkbox>
            </a-space>
          </div>
        </div>
      </div>

      <!-- 酒店图片 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium dark:text-white">酒店图片</h3>
          <a-upload
            action="/api/upload"
            :show-file-list="false"
            accept="image/*"
            multiple
            @before-upload="beforeUpload"
            @success="onUploadSuccess"
          >
            <template #upload-button>
              <a-button type="primary">
                <template #icon><icon-upload /></template>
                上传图片
              </a-button>
            </template>
          </a-upload>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div
            v-for="(image, index) in hotelInfo.images"
            :key="index"
            class="relative group"
          >
            <a-image
              :src="image.url"
              :alt="image.name"
              fit="cover"
              width="100%"
              height="160px"
            />
            <div
              class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center space-x-2"
            >
              <a-button
                type="text"
                status="warning"
                @click="setMainImage(index)"
                :class="image.isMain ? 'text-yellow-400' : 'text-white'"
              >
                <template #icon><icon-star /></template>
              </a-button>
              <a-button type="text" status="danger" @click="deleteImage(index)">
                <template #icon><icon-delete /></template>
              </a-button>
            </div>
            <div
              v-if="image.isMain"
              class="absolute top-2 right-2 bg-yellow-400 text-white px-2 py-1 rounded text-xs"
            >
              主图
            </div>
          </div>
        </div>
        <div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">
          支持 jpg、png、gif 格式，单张图片不超过 2M，最多可上传 10 张图片
        </div>
      </div>
    </a-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import {
  IconRefresh,
  IconSave,
  IconUpload,
  IconStar,
  IconDelete,
} from "@arco-design/web-vue/es/icon";

const saving = ref(false);

const hotelInfo = ref({
  name: "贵港大酒店",
  phone: "0775-12345678",
  email: "contact@gghotel.com",
  license: "L20240227001",
  address: "广西贵港市港北区中山路123号",
  description:
    "贵港大酒店位于市中心，交通便利，环境优美，设施齐全，是您商务出行、休闲度假的理想选择。",
  checkInTime: "14:00",
  checkInEndTime: "23:00",
  checkOutTime: "12:00",
  facilities: [1, 2, 3, 5, 8, 10, 12, 15],
  images: [
    {
      url: "/hotel-1.jpg",
      name: "酒店外观",
      isMain: true,
    },
    {
      url: "/hotel-2.jpg",
      name: "大堂",
      isMain: false,
    },
    {
      url: "/hotel-3.jpg",
      name: "餐厅",
      isMain: false,
    },
  ],
});

const facilities = [
  {
    name: "基础设施",
    items: [
      { id: 1, name: "免费WiFi" },
      { id: 2, name: "停车场" },
      { id: 3, name: "电梯" },
      { id: 4, name: "无障碍设施" },
    ],
  },
  {
    name: "餐饮服务",
    items: [
      { id: 5, name: "餐厅" },
      { id: 6, name: "咖啡厅" },
      { id: 7, name: "酒吧" },
      { id: 8, name: "送餐服务" },
    ],
  },
  {
    name: "休闲娱乐",
    items: [
      { id: 9, name: "健身房" },
      { id: 10, name: "游泳池" },
      { id: 11, name: "SPA" },
      { id: 12, name: "商务中心" },
    ],
  },
  {
    name: "其他服务",
    items: [
      { id: 13, name: "24小时前台" },
      { id: 14, name: "行李寄存" },
      { id: 15, name: "叫车服务" },
      { id: 16, name: "洗衣服务" },
    ],
  },
];

const resetForm = () => {
  // 重置表单
  hotelInfo.value = {
    name: "",
    phone: "",
    email: "",
    license: "",
    address: "",
    description: "",
    checkInTime: "",
    checkInEndTime: "",
    checkOutTime: "",
    facilities: [],
    images: [],
  };
};

const saveHotelInfo = async () => {
  saving.value = true;
  try {
    // 调用API保存酒店信息
    await new Promise((resolve) => setTimeout(resolve, 1000));
    Message.success("保存成功");
  } catch (error) {
    Message.error("保存失败");
  } finally {
    saving.value = false;
  }
};

const beforeUpload = (file) => {
  const isImage = /^image\//.test(file.type);
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    Message.error("只能上传图片文件！");
    return false;
  }
  if (!isLt2M) {
    Message.error("图片大小不能超过 2MB！");
    return false;
  }
  return true;
};

const onUploadSuccess = (response) => {
  // 处理上传成功后的逻辑
  hotelInfo.value.images.push({
    url: response.url,
    name: response.name,
    isMain: false,
  });
  Message.success("上传成功");
};

const setMainImage = (index) => {
  hotelInfo.value.images.forEach((image, i) => {
    image.isMain = i === index;
  });
};

const deleteImage = (index) => {
  hotelInfo.value.images.splice(index, 1);
  Message.success("删除成功");
};
</script>

<style lang="less" scoped>
:deep(.arco-form-item-label) {
  .dark & {
    color: #e5e7eb;
  }
}

:deep(.arco-input-wrapper) {
  .dark & {
    background-color: #374151;
    border-color: #4b5563;

    &:hover,
    &:focus {
      border-color: #60a5fa;
    }
  }
}

:deep(.arco-checkbox) {
  .dark & {
    color: #e5e7eb;
  }
}

:deep(.arco-time-picker) {
  .dark & {
    background-color: #374151;
    border-color: #4b5563;

    &:hover,
    &:focus {
      border-color: #60a5fa;
    }
  }
}
</style>
